<template>
	<view class="page flex-col">
		<uni-nav-bar color="white" @clickLeft="back" :fixed="true" :background-color="navColor" status-bar
			left-icon="left" :border="false">
			<view class="top">
				进度汇报
			</view>
		</uni-nav-bar>
		<view class="head"></view>
		<view class="group_7 flex-col">
			<view class="block_13 flex-row justify-between">
				<text class="text_3">进度填写</text>
				<view class="image-text_3 flex-row justify-between">
					<text class="text-group_1">历史提交</text>
					<image class="thumbnail_9" referrerpolicy="no-referrer"
						src="../../static/icon/right.png" />
				</view>
			</view>
		</view>
		<view class="box_4 flex-col">
			<block v-for="item in model.deptConversionMetricItems">
				<block v-if="item.isQuantified">
					<view class="block_14 flex-row">
						<view class="text-group_22 flex-col">
							<text class="text_4">{{item.title}}</text>
							<text class="text_5">目标值：{{item.targetNum}}</text>
						</view>
						<input type="number" v-model="item.completeNum" placeholder="请填写实际值"/>
						<text class="text_7">{{item.unit}}</text>
					</view>
					<view class="divide"></view>
				</block>
				<block v-else>
					<text class="text_19">{{item.title}}</text>
					<view class="block_7 flex-col">
						
						<colorfulprogress width="100%" @update:progress="changeprogress($event,item)" v-model="item.completeNum" :progress="item.completeNum" boder-color="#A4A2BA" text-color="#A4A2BA" bodyColor="#ECEBFB"></colorfulprogress>
					</view>
					<view class="divide"></view>
				</block>
			</block>
			
		</view>
		<view class="box_4 flex-col">
			<block v-for="item in model.deptConversionMetricProducts">
				<view class="block_14 flex-row">
					<view class="text-group_22 flex-col">
						<text class="text_4">{{item.productName}}</text>
						<text class="text_5">目标值：{{item.targetNum}}{{item.unit}}</text>
					</view>
					<input type="number" v-model="item.completeNum" placeholder="请填写实际值"/>
					<text class="text_7">{{item.unit}}</text>
				</view>
				<view class="divide"></view>
			</block>
			
			
		</view>
		<view class="group_8 flex-col">
			<view class="section_17 flex-row justify-between">
				<view class="text-wrapper_2 flex-col" @tap="submit">
					<text class="text_45">提交进展</text>
				</view>
				<!-- <view class="text-wrapper_3 flex-col">
					<text class="text_46">提交进展</text>
				</view> -->
			</view>
			
		</view>
		<view class="box_7 flex-col" v-if="model.planningScheme">
			<view class="section_18 flex-row justify-between">
				<text class="text_47">{{model.planningScheme.title}}</text>
				<view class="text-wrapper_4 flex-col">
					<text class="text_48">{{model.planningScheme.eventCategoryName}}</text>
				</view>
			</view>
			<text class="text_49">{{model.planningScheme.startDate?model.planningScheme.startDate.replace(/-/g,'.'):''}}-{{model.planningScheme.endDate?model.planningScheme.endDate.replace(/-/g,'.'):''}}</text>
			<text class="text_50">分解人：{{model.planningScheme.splitRealName}}</text>
			<view class="section_19 flex-row justify-start">
				<view class="text-wrapper_5 flex-col" v-for="item in model.planningScheme.activityCategorys" >
					<text class="text_51">{{item.activityCategoryName}}</text>
				</view>
				
			</view>
			<view class="divide"></view>
			<text class="text_53">进度：</text>
			<colorfulprogress :readonly="true" :progress="model.planningScheme.progressValue"  width="100%" ></colorfulprogress>
		</view>
	</view>
</template>
<script>
	import helper from "../../utils/helper";
	import { agingApi as agingApi } from "../../utils/api";
	export default {
		data() {
			return {
				id:'',
				navColor: 'transparent',
				model:{},
				placeholderStyle: "color:#cccccc;font-size:32rpx",
				styles: {
					color: '#383838',
					fontSize: '50rpx'
				}
			};
		},
		onPageScroll(e) {

			const scrollTop = e.scrollTop; // 获取页面滚动位置
			if (scrollTop < 100) {
				this.navColor = `rgba(37,47,98, ${scrollTop / 100})`; // 根据滚动位置设置透明度
			} else {

				this.navColor = 'rgba(37,47,98, 1)'; // 滚动超过一定距离后设为不透明
			}
		},
		onLoad(e){
			this.id=e.id
			this.getinfo()
		},
		methods: {
			changeprogress(value,item){
				item.completeNum=value
			},
			async getinfo(){
				var user=(await helper.getUser())
				var result = await agingApi.getreportinfo(this.id);
				if(result.data){
					this.model=result.data
					this.model.startDate=this.model.planningScheme.startDate
					this.model.endDate=this.model.planningScheme.endDate
				}
				
			},
			async submit(){

				
				this.model.planningScheme=null
				var result = await agingApi.submitreport(this.model);
				if(result.code==0){
					uni.showToast({
						title:"提交成功",
						icon:'none'
					})
					setTimeout(()=>{
						this.back()
					},1000)
					
				}
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	};
</script>
<style lang="scss">
	@import '../common/common.scss';
	@import './index.scss';
</style>